.index {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 28rpx;
  border: 1rpx solid transparent;
}

.index-profile {
  width: 80%;
  margin: 100rpx auto 60rpx auto;
}

.index-profile__img {
  display: block;
  border-radius: 50%;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.index-profile__nickname {
  text-align: center;
  padding: 20rpx 0;
}

.index-title {
  font-size: 60rpx;
  font-weight: 800;
  text-align: center;
}

.index-books {
  width: 80%;
  margin: 50rpx auto;
  overflow: hidden;
}

.index-books__input {
   width: 100%;
}

.index-books__input input {
  border: 1rpx solid #eee;
  height: 60rpx;
  line-height: 50rpx;
  padding: 5rpx 10rpx;
}

.index-books__showLayer {
  margin-top: 20rpx;
  max-height: 550rpx;
  overflow: auto;
}

.index-books__item {
  display: flex;
  min-height: 60rpx;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}

.index-books__controls--show,
.index-books__controls--edit-area {
  flex-basis: 40%;
}

.index-books__controls--show,
.index-books__controls--edit-area > input {
  height: 60rpx;
  line-height: 60rpx;
  border: 1rpx solid transparent;
  padding: 0 10rpx;
}

.index-books__controls--edit-area > input {
  border: 1rpx solid #eee;
  padding: 4rpx 10rpx;  /*hack 上下 4rpx 为了解决 input 显示时文字的移动*/
}

.index-books__controls--create {
  margin: 40rpx 0;
}

.btn {
  font-size: 20rpx;
  margin: 0 10rpx;
}

.index-books__controls--edit-btn,
.index-books__controls--delete {
  width: 106rpx;
}